<!--&lt;!&ndash; 使用EL表达式(${app_path})查出项目路径 &ndash;&gt;-->
<!--&lt;!&ndash; jquery 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/js/jquery-3.5.1.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap 核心 CSS 文件 &ndash;&gt;-->
<!--<link rel="stylesheet" href="${app_path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
<!--&lt;!&ndash; Bootstrap 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap alert 扩展 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/bootstrap-alert-extend/bootstrap-alert-extend.js"></script>-->


<div class="col-sm-10">

    <div class="page-header" style="margin-top: -20px;margin-bottom: 5px;">
        <h2>用户角色管理</h2>
    </div>

    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">
            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    搜索：
                                    <input id="search_input" type="text" class="form-control" placeholder="Search">
                                </div>
                                <button class="btn btn-default" type="button" id="search_btn">查询</button>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="navbar-collapse" id="bs-example-navbar-collapse-2">
                <!--表格-->
<!--                用于显示用户信息的表格-->
                <table id="user_curd_table" class="table table-hover table-bordered table-striped">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>拥有的角色</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>
<!--        该行用于显示分页信息-->
        <div class="row">
<!--            该列用于显示页数信息-->
            <div id="page_info" class="col-md-4 text-center">
                <p>当前页:&nbsp;&nbsp;页显示量:&nbsp;&nbsp;总页数:&nbsp;&nbsp;总数据量:</p>
            </div>
<!--            该列用于显示分页导航条-->
            <div class="col-md-offset-2 col-md-6">
                <nav aria-label="Page navigation">
                    <ul id="page_nav" class="pager">
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</div>

<!--修改用户角色模态框-->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改用户角色</h4>
            </div>
            <div class="modal-body">

                <form id="update_user_form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" name="id" class="form-control" id="id_update_input" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="username" class="form-control" id="username_update_input"
                                   placeholder="用户名(6-20位的英文字符或数字)" disabled>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">拥有角色</label>
                        <div class="col-sm-10">
                            <select id="role_update_select"
                                    class="selectpicker show-tick form-control" multiple data-live-search="false"
                                    title="没有选中任何角色">
                            </select>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="update_user_btn" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于删除角色 -->
<div class="modal fade" id="delete_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">删除角色</h4>
            </div>
            <div class="modal-body">
                <p id="delete_tip_p">模态框内容</p>
                <p id="delete_id_p" style="visibility: hidden"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_role_btn" class="btn btn-danger">确认</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //定义一些全局变量
    //let totalRecords;
    //let errInputClass = "has-error";

    //加载页面后进行的操作
    $(function () {
        //开始等待页面数据填充
        startWaiting();
        //发送跳转请求到用户表第1页
        to_page(1);
        //绑定按钮点击事件
        bindOnEvent();
        //循环检查页面数据填充是否结束
        checkIsFinish();
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting(){
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish(){
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish&&bindOnEvent_finish){//如果可以结束，则结束
                console.log("页面加载完成!");
                sessionStorage.removeItem("to_page_finish");
                sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        },200);
    }


    //该方法用于跳转到页面并查询
    function to_page(pn) {
        sessionStorage.setItem("to_page_finish","false");
        let searchString = $("#search_input").val();//先获取搜索框里的字段
        $.ajax({
            url: userWithRoleInterface,//非Rest
            data: "pn=" + pn +"&search=" + searchString,
            type: "GET",
            //type: "GET",
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                // 构建用户表
                build_user_table(result);
                // 构建构建页数信息条
                build_page_info(result);
                // 构建分页导航条
                build_user_nav(result);
            }, complete: function () {
                sessionStorage.setItem("to_page_finish","true");
            }
        });
    }

    //该方法用于构建用户数据表
    function build_user_table(result) {
        let $userTable = $("#user_curd_table tbody");
        $userTable.empty();//添加前需要先清空

        let userList = result.dataMap.pageInfo.list;//用户的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        let roleList;//角色列表

        $.ajax({//请求全部角色
            url: getAllRoleInterface,
            type: "GET",
            async: false,//async设置为false可以使请求成为同步模式
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                roleList = result.dataMap.roleList;
            }
        });

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(userList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.username+"\n";
            let $checkbox = $("<input type='checkbox' class='user_check_item'/>");//创建选框
            let $checkboxTd = $("<td></td>").append($checkbox);//创建选框格并加入选框
            let $userIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $userNameTd = $("<td></td>").append(item.username);//创建用户名格并加入用户名数据
            let $emailTd = $("<td></td>").append(item.email);//创建邮箱格并加入邮箱数据
            let nowRoles = item.roleList;//该用户目前拥有的角色
            let userRoleIdList = [];
            $.each(nowRoles, function (index, item) {
                userRoleIdList.push(item.id);
            });

            let $roleSelect = $("<select></select>")
                .addClass("selectpicker show-tick row-select")
                .attr("multiple","")
                .attr("title","未拥有任何角色")
                .attr("data-selected-text-format","count > 4")//最多显示4个角色
                .attr("data-count-selected-text","拥有{0}个角色(点击查看详情)")
                .attr("data-live-search","false");
            // $roleSelect.selectpicker({
            //     'selectedText': 'cat'
            // });
            $.each(roleList, function (index, item) {
                //示例 <option value="0">苹果</option>
                let $roleOp = $("<option></option>")
                    .addClass("role_option")//加入一个识别用的框
                    .append(item.role_name)
                    .attr("disabled","")//禁用选中
                    .attr("value", item.id);//创建选项框
                $roleSelect.append($roleOp);//加入选项框
            });
            $roleSelect.val(userRoleIdList);//给修改模态框进行默认勾选
            let $roleNameTd = $("<td></td>").append($roleSelect);//创建角色名格并加入角色选中栏数据

            let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_user_btn\">修改</button>");
            // let $deleteBtn = $("<button class=\"btn btn-danger btn-sm delete_user_btn\" style='margin-left: 10px;'>删除</button>");
            let $operationTd = $("<td></td>").append($updateBtn)
                // .append($deleteBtn)
            ;//创建操作格并加入操作按钮

            let $userTr = $("<tr></tr>")//创建用户数据行并加入各种数据格子
                // .append($checkboxTd)
                .append($userIdTd)
                .append($userNameTd)
                .append($emailTd)
                .append($roleNameTd)
                .append($operationTd);

            $userTable.append($userTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        })

        //构造空数据行
        for (let i = createNums; i < tableSize; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 5; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $userTable.append($userTr);//将数据行加入表格中
        }

        //初始化每一行的selectpicker
        $(".row-select").selectpicker({
            'selectedText': 'cat',
            width: 350//给它设定初始宽度
        });
        //不刷新则无法显示
        $(".row-select").selectpicker('refresh');
        $(".row-select").selectpicker('render');

        //下面为构建修改模态框里的下拉选框
        let $roleUpdateSelect = $("#role_update_select");
        $roleUpdateSelect.empty();//构建前先清空
        //设置selectpicker(bootstrap-select)的selectpicker的属性
        $roleUpdateSelect.selectpicker({
            'selectedText': 'cat'
        });
        $.each(roleList, function (index, item) {
            let $resourceOp = $("<option></option>").append(item.role_name).attr("value", item.id);//创建选项框
            $roleUpdateSelect.append($resourceOp);//加入选项框
        });
        //不刷新则无法显示
        $roleUpdateSelect.selectpicker('refresh');
        $roleUpdateSelect.selectpicker('render');
    }

    //该方法用于构建页数信息条
    function build_page_info(result) {
        let $pageInfo = $("#page_info");
        $pageInfo.empty();//先清空"页数信息条"里的信息

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量

        //totalRecords = total;

        let $pageInfoP = $("<span></span>").append(
            "当前页:" + pageNum + "&nbsp;&nbsp;" +
            "页显示量:" + pageSize + "&nbsp;&nbsp;" +
            "总页数:" + pages + "&nbsp;&nbsp;" +
            "总数据量:" + total);

        $pageInfo.append($pageInfoP);//再往"页数信息条"里添加信息
    }

    //该方法用于构建分页导航条
    function build_user_nav(result) {
        let $navUl = $("#page_nav");//找到需要被添加的导航栏对象
        $navUl.empty();//添加前需要先清空

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        let isFirstPage = result.dataMap.pageInfo.isFirstPage;//是否是首页的标识
        let isLastPage = result.dataMap.pageInfo.isLastPage;//是否是尾页的标识
        let navigatepageNums = result.dataMap.pageInfo.navigatepageNums;//导航栏要显示的数字们

        sessionStorage.setItem("nowPage",pageNum);//设置当前页数
        sessionStorage.setItem("totalRecords",total);//设置总记录数

        let $firstPageLi = $("<li></li>").append(
            $("<a></a>").append("首页").attr("href", "#")
        );
        let $prePageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&laquo;")
                ).attr("href", "#")
            );

        let $nextPageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&raquo;")
                ).attr("href", "#")
            );
        let $lastPageLi = $("<li></li>").append(
            $("<a></a>").append("尾页").attr("href", "#")
        );

        //如果是首页，则有两个按钮不能点击
        if (isFirstPage) {
            $firstPageLi.addClass("disabled");//第一页li添加disabled的class
            $firstPageLi.find("a").removeAttr("href");//找到第一页li下的a标签并清除属性

            $prePageLi.addClass("disabled");//前一页li添加disabled的class
            $prePageLi.find("a").removeAttr("href");//找到前一页li下的a标签并清除href属性
        } else {
            $firstPageLi.click(function () {
                to_page(1);
            });
            $prePageLi.click(function () {
                to_page(pageNum - 1);
            });
        }

        //如果是尾页，则有两个按钮不能点击
        if (isLastPage) {
            $lastPageLi.addClass("disabled");//最后页li添加disabled的class
            $lastPageLi.find("a").removeAttr("href");//找到最后页li下的a标签并清除属性

            $nextPageLi.addClass("disabled");//后一页li添加disabled的class
            $nextPageLi.find("a").removeAttr("href");//找到后一页li下的a标签并清除href属性
        } else {
            $lastPageLi.click(function () {
                to_page(pages);
            });
            $nextPageLi.click(function () {
                to_page(pageNum + 1);
            });
        }

        //添加"首页"按钮
        $navUl.append($firstPageLi);
        //添加"上一页"按钮
        $navUl.append($prePageLi);
        //遍历添加所有要显示的页码
        $.each(navigatepageNums, function (index, item) {
            let $numLi = $("<li></li>").append(
                $("<a></a>").append(item).attr("href", "#")
            );
            //如果目前的页码真的与遍历页码相等
            if (pageNum == item) {
                $numLi.addClass("active");
                $numLi.empty();//清除里面能点击的a标签
                $numLi.append(
                    $("<span></span>").append(item).append(
                        $("<span></span>").addClass("sr-only")
                    )
                );
            }
            //设置显示的页码格子的点击事件
            $numLi.click(function () {
                to_page(item);
            });

            $navUl.append($numLi);//将每一个要显示的页码加入导航栏中
        });
        //添加"下一页"按钮
        $navUl.append($nextPageLi);
        //添加"尾页"按钮
        $navUl.append($lastPageLi);

        //给该分页条修改magin
        $navUl.css({
            margin : 5
        });
    }

    /**
     * 该方法用于清除错误提示
     */
    function clearUserForm() {
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");
        //移除所有的错误提示样式
        $username_add_input.parent().removeClass("has-error");
        $username_add_input.next("span").empty();
        $password_add_input.parent().removeClass("has-error");
        $password_add_input.next("span").empty();
        $email_add_input.parent().removeClass("has-error");
        $email_add_input.next("span").empty();
    }


    /**
     * 该方法用于检查用户添加表格
     */
    function checkUserForm() {

    }


    function showErrorToFrom(result) {
        //先清除错误提示
        clearUserForm();

        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");

        if (result.dataMap.fieldErrors.username != undefined) {//若不匹配，显示提示

            $username_add_input.parent().addClass("has-error");
            $username_add_input.next("span").append(result.dataMap.fieldErrors.username);
        }
        if (result.dataMap.fieldErrors.password != undefined) {//若不匹配，显示提示
            $password_add_input.parent().addClass("has-error");
            $password_add_input.next("span").append(result.dataMap.fieldErrors.password);
        }
        if (result.dataMap.fieldErrors.email != undefined) {//若不匹配，显示提示
            $email_add_input.parent().addClass("has-error");
            $email_add_input.next("span").append(result.dataMap.fieldErrors.email);
        }
    }


    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        sessionStorage.setItem("bindOnEvent_finish","false");
        //搜索按钮的点击事件
        $('#search_btn').off("click").click(function () {
            to_page(1);//搜索时默认只能跳到第1页
        });

        //test1Btn
        $('#test1Btn').off("click").click(function () {
            alertUtil.message("测试消息", "warning");
        });
        //添加用户绑定弹出模态框的点击事件
        $('#saveBtn').off("click").click(function () {
            //调用html元素的清除表单数据方法
            $("#add_user_form")[0].reset();
            //清除错误提示
            clearUserForm();
            //弹出模态框
            $('#saveUserModal').modal({
                backdrop: 'static'
            });

        });

        //绑定弹出模态框的点击事件
        $("#add_user_btn").off("click").click(function () {
            //调用html元素的清除表单数据方法
            $("#add_user_form")[0].reset();
            //清除错误提示
            clearUserForm();
            //弹出模态框
            $("#addUserModal").modal({
                backdrop: "static"
            });
        });

        //绑定修改用户角色确认按钮的点击事件
        $("#update_user_btn").off("click").click(function () {
            let userId = $("#id_update_input").val();
            let username = $("#username_update_input").val();
            let roleIdList = $('#role_update_select').val();
            let roleData = {
                id: userId,
                username: username,
                roleIdList: roleIdList
            };
            let roleJsonData = JSON.stringify(roleData);
            console.log("roleJsonData:" + roleJsonData);

            $.ajax({//请求保存该角色
                url: userWithRoleInterface,
                data: roleJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "PUT",
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    //关闭模态框
                    $('#update_user_modal').modal('hide');
                    //跳转到尾页
                    to_page(sessionStorage.getItem("nowPage"));
                },
                error: function () {
                    //关闭模态框
                    $('#update_user_modal').modal('hide');
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });


        // //删除用户绑定弹出模态框的点击事件（已废弃）
        // $(document).on("click", ".delete_user_btn", function () {
        //     let userID = $(this).parents("tr").find("td:eq(0)").text();
        //     let userName = $(this).parents("tr").find("td:eq(1)").text();
        //     let userNickname = $(this).parents("tr").find("td:eq(2)").text();
        //     let password = $(this).parents("tr").find("td:eq(4)").text();
        //     let email = $(this).parents("tr").find("td:eq(5)").text();
        //     $("#delete_id_p").empty();
        //     $("#delete_id_p").text(userID);
        //     $("#delete_tip_p").empty();
        //     $("#delete_tip_p").append("确认删除用户<strong>["+userName+"]</strong>吗？<strong>注意，此操作不可逆！</strong>");//添加删除的提示
        //
        //     $('#deleteUserModal').modal({
        //         backdrop:'static'
        //     });
        // });

        // //绑定全选框的点击事件（已废弃）
        // $("#user_check_all").click(function () {
        //     //用.prop()函数来获取或修改dom原生的属性
        //     let nowCheckAll = $(this).prop("checked");
        //     $(".user_check_item").prop("checked", nowCheckAll);
        // });

        // //绑定单行数据选框的点击事件 （已废弃）
        // //( on(事件,选择器,方法) 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素)
        // $(document).on("click", ".user_check_item", function () {
        //     //选中的数量和全部可选中的数量是否相等的标识
        //     let isCheckAll = $(".user_check_item:checked").length == $(".user_check_item").length;
        //     $("#user_check_all").prop("checked", isCheckAll);
        // });

        //每行更新按钮的点击事件
        $(document).off("click",'.update_user_btn').on("click",'.update_user_btn',function () {
            $(".role_option").removeAttr("disabled");
            let userID = $(this).parents("tr").find("td:eq(0)").text();
            let username = $(this).parents("tr").find("td:eq(1)").text();
            let roleIdList = $(this).parents("tr").find("select").val();

            console.log("roleIdList"+roleIdList);
            console.log("userID:"+userID+"    username:"+username);
            $("#id_update_input").val(userID);//需更新的id
            $("#username_update_input").val(username);//需更新的用户名
            $("#role_update_select").val(roleIdList);//给修改模态框进行默认勾选
            //不刷新则无法显示
            $("#role_update_select").selectpicker('refresh');
            $("#role_update_select").selectpicker('render');
            // alertUtil.message("信息为:"+roleIdList,"info");
            //显示修改用的模态框
            $('#update_user_modal').modal({
                show: true,
                backdrop: 'static'
            });
        });

        //绑定单行数据选框的点击事件 ( on(事件,选择器,方法) 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素)
        $(document).off("click", ".delete_user_btn").on("click", ".delete_user_btn", function () {
            let userId = $("#id_update_input").val();
        });

        sessionStorage.setItem("bindOnEvent_finish","true");
    }

</script>

